import { useContext, useEffect, useState } from "react"
import classnames from "classnames"
import { PartitionOutlined, HighlightOutlined } from '@ant-design/icons'
import { getObjValue } from '../utils'
import PaletteItem from "../components/PaletteItem"
import ProcessEditorContext from '../context'
import ProcessTree from "../components/ProcessTree"

const Palette = () => {
  const [curTab, setCurTab] = useState('palette')
  const {
    stencilItemGroups,
    editorManager
  } = useContext(ProcessEditorContext)

  const hangeChangeTab = (tab) => {
    if (editorManager && !editorManager.isLoading()) {
      if (tab !== curTab) {
        setCurTab(tab)
      }
    }
  }

  return <div className="palette-pabel">
    <div className="palette-tab">
      <div
        className={classnames("palette-tab-item", "center-box", {
          active: curTab === 'palette'
        })}
        onClick={() => hangeChangeTab('palette')}
        title="画板"
      >
        <HighlightOutlined style={{ fontSize: 18 }} />
      </div>
      <div
        className={classnames("palette-tab-item", "center-box", {
          active: curTab === 'tree'
        })}
        onClick={() => hangeChangeTab('tree')}
        title="流程导航"
      >
        <PartitionOutlined style={{ fontSize: 18 }} />
      </div>
    </div>
    <div className="palette-tab-pane">
      {
        curTab === 'tree' && <ProcessTree></ProcessTree>
      }
      {
        curTab === 'palette' && <div className="p-d-palette">
          {
            stencilItemGroups.map(group => <div
              key={group.name}
              className="palette-group-wrap"
            >
              <div className="palette-group-head">
                <b>{getObjValue(lang, group.name)}</b>
              </div>
              <div className="palette-group-body">
                {
                  group.items.map(item => <div key={item.id} title={getObjValue(lang, item.name)}>
                    <PaletteItem stencil={item}>
                      {getObjValue(lang, item.name)}
                    </PaletteItem>
                  </div>)
                }
              </div>
            </div>)
          }
        </div>
      }
    </div>
  </div>
}

export default Palette